<template>
  <div class="card-item" :class="`card-item${style}`">
    <a-statistic
      :value-style="{ color: '#fff', fontWeight: 'bold' }"
      :value="value"
      :precision="precision"
      :value-from="0"
      start
      animation
      :animation-duration="800"
    >
      <template #title>
        <div class="textfff">
          <icon-tags />
          <span>{{ title }}</span>
          <a-popover v-if="tip" position="rt">
            <icon-question-circle class="ml-2" />
            <template #content>
              <div style="max-width: 200px">{{ tip }}</div>
            </template>
          </a-popover>
        </div>
      </template>
    </a-statistic>
  </div>
</template>

<script setup lang="ts">
/**
 * title: 文字含义，显示在左边
 * value：数值
 * precision：小数位数
 */

defineOptions({ name: 'MsDataCard' })

interface Props {
  title?: string
  value?: number
  precision?: number
  style?: number
  tip?: string
}

withDefaults(defineProps<Props>(), {
  title: '',
  value: 0,
  precision: 0,
  style: 1,
  tip: ''
})
</script>

<style scoped lang="scss">
@mixin cardBg($leftColor, $rightColor) {
  background: -webkit-linear-gradient(to right, $leftColor, $rightColor);
  background: -o-linear-gradient(to right, $leftColor, $rightColor);
  background: -moz-linear-gradient (to right, $leftColor, $rightColor);
  background: linear-gradient(to right, $leftColor, $rightColor);
}
.card-item {
  min-width: 180px;
  box-sizing: border-box;
  padding: 15px 15px 0;
  border-radius: 6px;
  cursor: pointer;
  padding-bottom: 10px;
  margin-bottom: 25px;
  margin-right: 25px;
  box-shadow: 3px 5px 15px rgba(40, 40, 40, 0.36);
  &.card-item1 {
    @include cardBg(#5171fd, #c97afd);
    &:hover {
      box-shadow: 0 5px 10px #c97afd;
    }
  }
  &.card-item2 {
    @include cardBg(#deab8a, #fedcbd);
    &:hover {
      box-shadow: 0 5px 10px #fedcbd;
    }
  }
  &.card-item3 {
    @include cardBg(#3dadf6, #737bfc);
    &:hover {
      box-shadow: 0 5px 10px #737bfc;
    }
  }
  &.card-item4 {
    @include cardBg(#ea677c, #ef9b5f);
    &:hover {
      box-shadow: 0 5px 10px #ef9b5f;
    }
  }
  &.card-item5 {
    @include cardBg(#42d79b, #a6e25f);
    &:hover {
      box-shadow: 0 5px 10px #a6e25f;
    }
  }
  &:hover {
    transform: scale(1.03);
    transition: all 0.1s ease-out;
  }
  .card-title {
    color: #fff;
    font-size: 1rem;
  }
  .all-count {
    color: #fff;
    font-size: 2.4rem;
    font-weight: bold;
    margin-top: 12px;
    padding-left: 25px;
  }
}
</style>
